{extend name="../../admin/view/main"}

{block name='content'}
<div class="think-box-shadow portal-block-container notselect">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-sm2 layui-col-md2">
            <div class="portal-block-item nowrap" style="background:linear-gradient(-125deg,#ff7d7d,#fb2c95)">
                <div>用户总量</div>
                <div>{$usersTotal|default='0'}</div>
                <div>当前用户总数量</div>
            </div>
            <i class="portal-block-icon layui-icon layui-icon-user"></i>
        </div>
        <div class="layui-col-sm2 layui-col-md2">
            <div class="portal-block-item nowrap" style="background:linear-gradient(-125deg,#ff7d7d,#fb2c95)">
                <div>有效用户</div>
                <div>{$usersTotal - $usersExpire}</div>
                <div>当前有效用户总量</div>
            </div>
            <i class="portal-block-icon layui-icon layui-icon-user"></i>
        </div>
        <div class="layui-col-sm2 layui-col-md2">
            <div class="portal-block-item nowrap" style="background:linear-gradient(-125deg,#ff7d7d,#fb2c95)">
                <div>过期用户</div>
                <div>{$usersExpire|default='0'}</div>
                <div>当前过期用户总量</div>
            </div>
            <i class="portal-block-icon layui-icon layui-icon-user"></i>
        </div>
        <div class="layui-col-sm2 layui-col-md2">
            <div class="portal-block-item nowrap" style="background:linear-gradient(-125deg,#57bdbf,#2f9de2)">
                <div>今日活跃</div>
                <div>{$dayTotal|default='0'}</div>
                <div>用户今日活跃总数量</div>
            </div>
            <i class="portal-block-icon layui-icon layui-icon-app"></i>
        </div>
        <div class="layui-col-sm2 layui-col-md2">
            <div class="portal-block-item nowrap" style="background:linear-gradient(-113deg,#c543d8,#925cc3)">
                <div>当月活跃</div>
                <div>{$monthTotal|default='0'}</div>
                <div>用户当月活跃总数量</div>
            </div>
            <i class="portal-block-icon layui-icon layui-icon-form"></i>
        </div>
    </div>
</div>

<div class="layui-row layui-col-space15 margin-top-10">
    <div class="layui-col-xs12 padding-bottom-0">
        <div class="think-box-shadow">
            <div id="main2" style="width:100%;height:350px"></div>
        </div>
    </div>
    <div class="layui-col-xs12 padding-bottom-0">
        <div class="think-box-shadow">
            <div id="main3" style="width:100%;height:350px"></div>
        </div>
    </div>
</div>

<label class="layui-hide">
    <textarea id="jsondata1">{$days|json_encode}</textarea>
    <textarea id="jsondata2">{$months|json_encode}</textarea>
</label>

<script>

    require(['echarts'], function (echarts) {
        var data1 = JSON.parse($('#jsondata1').html());
        var days = data1.map(function (item) {
            return item['当天日期'];
        });
        (function (charts) {
            window.addEventListener("resize", function () {
                charts.resize()
            });
            charts.setOption({
                grid: [{left: '10%', right: '3%', top: '25%'}],
                title: [{left: 'center', text: '日活跃用户数'}],
                tooltip: {trigger: 'axis'},
                xAxis: [{data: days, gridIndex: 0}],
                yAxis: [{type: 'value', splitLine: {show: true}, gridIndex: 0, axisLabel: {formatter: '{value} 用户'}}],
                series: [
                    {
                        type: 'line',
                        smooth: true, showBackground: true,
                        areaStyle: {color: 'rgba(180, 180, 180, 0.5)'},
                        label: {formatter: '{c} 用户', showSymbol: false, show: true},
                        data: data1.map(function (item) {
                            return item['用户数'];
                        }),
                        markLine: {
                            data: [[
                                {x: '90%', symbol: 'none', yAxis: 'max'},
                                {symbol: 'circle', label: {position: 'start', formatter: '最大 {c} '}, type: 'max', name: '最高点'}
                            ]]
                        }
                    }
                ]
            });
        })(echarts.init(document.getElementById('main2')));

        var data2 = JSON.parse($('#jsondata2').html());
        var mounts = data2.map(function (item) {
            return item['月份'];
        });
        (function (charts) {
            window.addEventListener("resize", function () {
                charts.resize()
            });
            charts.setOption({
                grid: [{left: '10%', right: '3%', top: '25%'}],
                title: [{left: 'center', text: '月活跃用户数'}],
                tooltip: {trigger: 'axis'},
                xAxis: [{data: mounts, gridIndex: 0}],
                yAxis: [{type: 'value', splitLine: {show: true}, gridIndex: 0, axisLabel: {formatter: '{value} 用户'}}],
                series: [
                    {
                        type: 'line',
                        smooth: true, showBackground: true,
                        areaStyle: {color: 'rgba(180, 180, 180, 0.5)'},
                        label: {formatter: '{c} 用户', showSymbol: false, show: true},
                        data: data2.map(function (item) {
                            return item['用户数'];
                        }),
                        markLine: {
                            data: [[
                                {x: '90%', symbol: 'none', yAxis: 'max'},
                                {symbol: 'circle', label: {position: 'start', formatter: '最大 {c}'}, type: 'max', name: '最高点'}
                            ]]
                        }
                    }
                ]
            });
        })(echarts.init(document.getElementById('main3')));
    });
</script>

{/block}
